<template>
	<view class="container">
		<view class="record-list">
			<view v-for="(record, index) in records" :key="index" class="record-item">
				<text class="record-title">{{ record.title }}</text>
				<text class="record-details">{{ record.details }}</text>
				<text class="record-date">{{ record.date }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		useRouter
	} from 'vue-router';

	const router = useRouter();

	const records = [{
			title: '门诊挂号',
			details: '北京市医院 - 主治医生：张医生',
			date: '2024-03-20'
		},
		{
			title: '门诊挂号',
			details: '上海市医院 - 主治医生：王医生',
			date: '2024-03-19'
		},
		{
			title: '门诊挂号',
			details: '广州市医院 - 主治医生：李医生',
			date: '2024-03-18'
		}
	];
</script>

<style scoped>
	.container {
		padding: 20px;
	}

	.record-item {
		border: 1px solid #ccc;
		border-radius: 5px;
		padding: 10px;
		margin-bottom: 10px;
	}

	.record-title {
		font-weight: bold;
		font-size: 18px;
		margin-bottom: 5px;
	}

	.record-details {
		margin-bottom: 5px;
	}

	.record-date {
		color: #888;
	}
</style>